<template>
  <div class="selector w-full"
       @click="active = !active">
    <div class="flex between~ h-35px">
      <div class="h-full text-xs center~ mr-10px rounded box-border p-5px border border-gray-200">
        选择所属团队
      </div>
      <div class="flex-1 flex rounded box-border p-5px border border-gray-200 h-full">
        <div class="flex-1 h-full text-sm center~">{{ groupName }}</div>
        <div class="flex-none w-20px  h-full text-gray-200">
          <div v-if="!active" class="full~ i-carbon-chevron-down text-xs"></div>
          <div v-else class="full~ i-carbon-chevron-up text-xs"></div>
        </div>
      </div>
    </div>
    <div v-show="active" class="list w-full h-60px rounded overflow-y-scroll">
      <div v-for="(item, index) of groups" :key="index"
           @click="onSelect(item.groupId, item.groupName)"
           class="hover:bg-blue-100 box-border p-10px text-sm">
        {{ item.groupName }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {GroupItem} from "@/pages/project/type";

interface Props {
  groups: GroupItem[]
  value: number
}

const emits = defineEmits(["update:value"])
const rawProps = defineProps<Props>()
const {value, groups} = toRefs(rawProps)
const active = ref(false)
const groupName = ref("")

function onSelect(groupId: number, name: string) {
  groupName.value = name
  emits("update:value", groupId)
}
</script>

<style scoped>
.selector {
  position: relative;
}

.list {
  position: absolute;
  right: 0;
  bottom: -65px;
  box-shadow: 0 0 10px var(--gray);
}
</style>